<!-- 图片列表 -->
<template>
  <div class="myimage">
    <div class="top">
      <span @click="$router.go(-1)"> <i>&lt;</i> 我的相册</span>
    </div>
    <!-- 图片列表 -->
    <div class="list">
      <div class="img_list" v-for="(item, index) in myimglist" :key="index">
        <!-- 发布者信息 -->

        <div class="info">
          <!-- 头像 -->
          <div class="headpic">
            <img :src="item.haad_pic" alt="" />
          </div>
          <div class="name">
            <span>{{ item.name }}</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
        <!-- 图片 -->
        <div class="imgs">
          <span v-for="(items, indexs) in item.image_list" :key="indexs">
            <img :src="items" alt=""
          /></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { image_list } from "../../../utils/api";
const defaultProps = {
  children: "children",
  label: "label",
};
// 图片列表
var myimglist = ref([
  {
    name: "",
    time: "",
    haad_pic: "",
    image_list: "",
  },
]);

onMounted(() => {
  // 获取图片列表
  image_list().then((res) => {
    myimglist.value = res.data.userinfo;
    console.log(myimglist.value);
  });
});
</script>




<style   scoped>
* {
  margin: 0;
  padding: 0;
}
.top {
  line-height: 60px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.39);
  position: fixed;
  top: 0;
}
.top span {
  cursor: pointer;
}
.list {
  margin-top: 60px;
}
.top span {
  color: #1890ff;
  font-size: 14px;
  margin: 0 20px;
}
.img_list {
  width: 900px;
  margin: 40px 10px;
  padding: 10px 50px;
}
.info {
  display: flex;
  align-items: center;
}
.info .headpic {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 5px;
}
.info .headpic img {
  height: 100%;
  border-radius: 50%;
}
.info .name {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.info .name span {
  margin: 2px;
}
.img_list .imgs {
  border-bottom: 1px solid rgb(222, 222, 222);
  display: flex;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.img_list .imgs span {
  width: 30%;
  height: 150px;
  margin: 5px;
  text-align: center;
  line-height: 150px;
  border-radius: 3px;
}
.img_list .imgs span img {
  width: 100%;
  height: 100%;
}
</style>




